<template>
  <div class="container">
    <a-breadcrumb>
      <a-breadcrumb-item>
        <icon-home />
      </a-breadcrumb-item>
      <a-breadcrumb-item>控制面板</a-breadcrumb-item>
      <a-breadcrumb-item>人员维护</a-breadcrumb-item>
    </a-breadcrumb>
    <a-card title="人员维护">
      <a-row>
        <a-col :flex="1">
          <a-form
              :model="formModel"
              :label-col-props="{ span: 6 }"
              :wrapper-col-props="{ span: 18 }"
              label-align="left"
          >
            <a-row :gutter="16">
              <a-col :span="8">
                <a-form-item label="隶属机构">
                  <a-select v-model="formModel.organizationId " :options="organizationList" allow-search></a-select>
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="邮箱">
                  <a-input v-model="formModel.email" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="手机">
                  <a-input v-model="formModel.cellphone" />
                </a-form-item>
              </a-col>
              <a-col :span="8">
                <a-form-item label="姓名">
                  <a-input v-model="formModel.fullName" />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-col>
        <a-divider style="height: 32px" direction="vertical" />
        <a-col :flex="'86px'" style="text-align: right">
          <a-space direction="vertical" :size="18">
            <a-button type="primary" @click="search">
              <template #icon><icon-search /></template>搜索
            </a-button>
          </a-space>
        </a-col>
      </a-row>

      <a-divider style="margin-top: 0" />
      <a-row style="margin-bottom: 16px">
        <a-col :span="12">
          <a-space>
            <a-button type="primary" @click="addNew">
              <template #icon>
                <icon-plus />
              </template>
              新建
            </a-button>
          </a-space>
        </a-col>
      </a-row>

      <a-table
          row-key="personId"
          :loading="loading"
          :pagination="pagination"
          :columns="columns"
          :data="renderData"
          :bordered="false"
          :size="'medium'"
          @page-change="onPageChange"
      >
        <template #enable="{ record }">
          <a-switch v-model="record.enabled" disabled />
        </template>
        <template #operations="{ record }">
          <span style="font-size: 1.3em; color: #777;">
          <icon-eye @click="btnView(record)" />&nbsp;
          <icon-edit @click="btnEdit(record)" />&nbsp;
          <icon-delete @click="btnDelete(record, fetchData)" />
          </span>
        </template>
      </a-table>
    </a-card>

    <a-modal :visible="modalType>0" modal-class="big" :footer="modalType>1" title="人员详情" @ok="btnEditSave(fetchData)" @cancel="modalType=0">
      <a-form
          :model="currRecord"
          :label-col-props="{ span: 6 }"
          :wrapper-col-props="{ span: 18 }"
          label-align="right"
          :disabled="modalType==1"
      >
        <a-form-item label=" 隶属机构">
          <a-select v-model="currRecord.organizationId " :options="organizationList" allow-search></a-select>
        </a-form-item>
        <a-form-item label="名">
          <a-input v-model="currRecord.firstName" />
        </a-form-item>
        <a-form-item label="中间名">
          <a-input v-model="currRecord.middleName" />
        </a-form-item>
        <a-form-item label="姓">
          <a-input v-model="currRecord.lastName" />
        </a-form-item>
        <a-form-item label="姓名">
          <a-input v-model="currRecord.fullName" />
        </a-form-item>
        <a-form-item label="邮箱" required>
          <a-input v-model="currRecord.email" />
        </a-form-item>
        <a-form-item label="手机" required>
          <a-input v-model="currRecord.cellphone" />
        </a-form-item>
        <a-form-item v-if="modalType==1" label="入职日期">
          <span>{{ formatTime(currRecord.enrollmentDate, 2) }}</span>
        </a-form-item>
        <a-form-item v-if="modalType==1" label="离职日期">
          <span>{{ formatTime(currRecord.departureDate, 2) }}</span>
        </a-form-item>
        <a-form-item v-if="modalType!==1" label="入职日期" >
          <a-date-picker v-model="currRecord.enrollmentDate" />
        </a-form-item>
        <a-form-item v-if="modalType!==1" label="离职日期" >
          <a-date-picker v-model="currRecord.departureDate" />
        </a-form-item>
        <a-form-item label="备注" >
          <a-textarea v-model="currRecord.remark" />
        </a-form-item>
        <a-form-item label="是否可用" required>
          <a-switch v-model="currRecord.enabled" />
        </a-form-item>
<!--        <a-form-item label="人员编号" required>-->
<!--          <a-input v-model="currRecord.personId" />-->
<!--        </a-form-item>-->

      </a-form>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>

import {  ref } from 'vue';
import useLoading from '@/hooks/loading';
import type {  TableData } from '@arco-design/web-vue/es/table/interface';
//import { getList } from '@/api/baseinfo/persons';
import { formModel, pagination, columns } from './const';
import { modalType, currRecord, btnView, btnEdit, btnEditSave, btnDelete, addNew } from './event';
import type { SelectOptionData } from '@arco-design/web-vue/es/select/interface';
import { getAll } from "@/api/dashboard/orgs";
import { formatTime } from '@/utils';
const { loading, setLoading } = useLoading(true);
const renderData = ref<TableData[]>();

const search = () => {
  pagination.current = 1;
  fetchData();
};
let organizationList = ref([] as SelectOptionData[]);
(async () => {
  let data = await getAll() as SelectOptionData[];
  organizationList.value = data;
})();

const onPageChange = (current: number) => {
  pagination.current = current;
  fetchData();
};
function getOrgData(pagination:any, formModel:any, sort='') {
  let pdata: any = {
    page: pagination.current,
    pageSize: pagination.pageSize,
    sortProperty: sort,
    sortDirection: 'Desc',
    queryProperties: new Array<any>()
  };
  if(typeof formModel.organizationId==='number') {
    pdata.organizationId = formModel.organizationId;
  }
  for(let key in formModel) {
    if(key!=='organizationId' && formModel[key]) {
      pdata.queryProperties.push({
        propertyName: key,
        propertyValue: formModel[key].toString(),
        condition: key.endsWith('Id')?'Equal':'Like'
      });
    }
  }
  return pdata;
}
const fetchData = async () => {
  let pdata = getOrgData(pagination, formModel.value, 'personId');
  // if(!pdata.organizationId) return setLoading(false);
  setLoading(true);
  const data = await getList(pdata);
  pagination.total = data.totalCount;
  renderData.value = data.items;
  setLoading(false);
};
fetchData();
</script>

